<template>
  <view class="invite-list-page">
    <!-- 统计卡片 -->
    <view class="stats-section">
      <view class="stats-card">
        <view class="stats-item">
          <text class="stats-value">{{ totalInvites }}</text>
          <text class="stats-label">邀请总数</text>
        </view>
        <view class="stats-item">
          <text class="stats-value">{{ todayInvites }}</text>
          <text class="stats-label">今日邀请</text>
        </view>
        <view class="stats-item">
          <text class="stats-value">{{ activeInvites }}</text>
          <text class="stats-label">有效邀请</text>
        </view>
      </view>
    </view>

    <!-- 筛选栏 -->
    <view class="filter-section">
      <view class="filter-tabs">
        <view 
          class="filter-tab" 
          :class="{ active: currentStatus === 'all' }"
          @click="switchStatus('all')"
        >
          全部
        </view>
        <view 
          class="filter-tab" 
          :class="{ active: currentStatus === 'active' }"
          @click="switchStatus('active')"
        >
          有效
        </view>
        <view 
          class="filter-tab" 
          :class="{ active: currentStatus === 'inactive' }"
          @click="switchStatus('inactive')"
        >
          无效
        </view>
      </view>
    </view>

    <!-- 邀请记录列表 -->
    <view class="invite-list">
      <view 
        class="invite-item" 
        v-for="(item, index) in inviteList" 
        :key="index"
      >
        <view class="invite-avatar">
          <image 
            :src="item.avatar || '/static/images/default-avatar.png'" 
            mode="aspectFill" 
            class="avatar-image"
          ></image>
        </view>
        <view class="invite-info">
          <view class="invite-name">{{ item.nickname || '用户' + item.user_id }}</view>
          <view class="invite-phone" v-if="item.phone">{{ formatPhone(item.phone) }}</view>
          <view class="invite-time">注册时间：{{ formatDate(item.create_time) }}</view>
          <view class="invite-commission" v-if="item.commission > 0">
            已获佣金：¥{{ formatPrice(item.commission) }}
          </view>
        </view>
        <view class="invite-status">
          <view class="status-badge" :class="item.status">
            {{ getStatusText(item.status) }}
          </view>
          <view class="invite-level" v-if="item.level">
            {{ getLevelText(item.level) }}
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="!loading && inviteList.length === 0">
      <text class="empty-text">暂无邀请记录</text>
      <text class="empty-desc">快去邀请好友加入吧</text>
    </view>

    <!-- 加载更多 -->
    <view class="load-more" v-if="hasMore && !loading">
      <text class="load-more-text" @click="loadMore">加载更多</text>
    </view>

    <!-- 加载中 -->
    <view class="loading" v-if="loading">
      <text class="loading-text">加载中...</text>
    </view>
  </view>
</template>

<script>
/**
 * 邀请列表页面
 * @author 王勇程 <laughskydragon@qq.com>
 */
import { getInviteList } from '@/api/invite'
import { formatPrice, formatDate } from '@/utils/common'

export default {
  data() {
    return {
      totalInvites: 0,
      todayInvites: 0,
      activeInvites: 0,
      currentStatus: 'all',
      inviteList: [],
      loading: false,
      hasMore: true,
      page: 1,
      pageSize: 20
    }
  },

  onLoad() {
    this.loadInviteData()
  },

  onPullDownRefresh() {
    this.refreshData()
  },

  onReachBottom() {
    if (this.hasMore && !this.loading) {
      this.loadMore()
    }
  },

  methods: {


    // 加载邀请数据
    async loadInviteData() {
      this.loading = true
      
      try {
        const res = await getInviteList({
          status: this.currentStatus,
          page: this.page,
          page_size: this.pageSize
        })
        
        if (res.code === 0) {
          const data = res.data
          
          // 统计数据
          this.totalInvites = data.stats?.total_invites || 0
          this.todayInvites = data.stats?.today_invites || 0
          this.activeInvites = data.stats?.active_invites || 0
          
          // 列表数据
          if (this.page === 1) {
            this.inviteList = data.list || []
          } else {
            this.inviteList = [...this.inviteList, ...(data.list || [])]
          }
          
          // 分页信息
          this.hasMore = data.has_more || false
        }
        
      } catch (error) {
        console.error('加载邀请数据失败:', error)
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
        uni.stopPullDownRefresh()
      }
    },

    // 切换状态
    switchStatus(status) {
      if (this.currentStatus === status) return
      
      this.currentStatus = status
      this.page = 1
      this.hasMore = true
      this.loadInviteData()
    },

    // 刷新数据
    refreshData() {
      this.page = 1
      this.hasMore = true
      this.loadInviteData()
    },

    // 加载更多
    loadMore() {
      if (this.hasMore && !this.loading) {
        this.page++
        this.loadInviteData()
      }
    },

    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        'active': '有效',
        'inactive': '无效',
        'pending': '待激活'
      }
      return statusMap[status] || '未知'
    },

    // 获取等级文本
    getLevelText(level) {
      return `${level}级下线`
    },

    // 格式化手机号
    formatPhone(phone) {
      if (!phone) return ''
      return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
    },

    // 格式化价格
    formatPrice(price) {
      return formatPrice(price)
    },

    // 格式化日期
    formatDate(date) {
      return formatDate(date, 'MM-DD HH:mm')
    }
  }
}
</script>

<style scoped>
.invite-list-page {
  background-color: #F5F5F5;
  min-height: 100vh;
}



/* 统计卡片 */
.stats-section {
  padding: 30rpx;
}

.stats-card {
  background-color: #FFF;
  border-radius: 16rpx;
  padding: 30rpx;
  display: flex;
  justify-content: space-around;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.stats-item {
  text-align: center;
}

.stats-value {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #FF4444;
  margin-bottom: 8rpx;
}

.stats-label {
  font-size: 24rpx;
  color: #999;
}

/* 筛选栏 */
.filter-section {
  background-color: #FFF;
  margin: 0 30rpx 30rpx;
  border-radius: 16rpx;
  padding: 20rpx;
}

.filter-tabs {
  display: flex;
  justify-content: space-around;
}

.filter-tab {
  padding: 16rpx 32rpx;
  border-radius: 24rpx;
  font-size: 28rpx;
  color: #666;
  background-color: #F5F5F5;
  text-align: center;
  flex: 1;
  margin: 0 10rpx;
}

.filter-tab.active {
  background-color: #FF4444;
  color: #FFF;
}

/* 邀请记录列表 */
.invite-list {
  padding: 0 30rpx;
}

.invite-item {
  background-color: #FFF;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
}

.invite-avatar {
  width: 80rpx;
  height: 80rpx;
  margin-right: 20rpx;
}

.avatar-image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.invite-info {
  flex: 1;
  margin-right: 20rpx;
}

.invite-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.invite-phone {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.invite-time {
  font-size: 22rpx;
  color: #999;
  margin-bottom: 8rpx;
}

.invite-commission {
  font-size: 22rpx;
  color: #00AA00;
}

.invite-status {
  text-align: right;
}

.status-badge {
  font-size: 22rpx;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  margin-bottom: 8rpx;
  display: inline-block;
}

.status-badge.active {
  background-color: #D4EDDA;
  color: #155724;
}

.status-badge.inactive {
  background-color: #F8D7DA;
  color: #721C24;
}

.status-badge.pending {
  background-color: #FFF3CD;
  color: #856404;
}

.invite-level {
  font-size: 20rpx;
  color: #999;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 100rpx 30rpx;
}

.empty-image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 16rpx;
  display: block;
}

.empty-desc {
  font-size: 24rpx;
  color: #CCC;
}

/* 加载更多 */
.load-more {
  text-align: center;
  padding: 30rpx;
}

.load-more-text {
  font-size: 28rpx;
  color: #FF4444;
  padding: 20rpx 40rpx;
  border: 1rpx solid #FF4444;
  border-radius: 24rpx;
}

/* 加载中 */
.loading {
  text-align: center;
  padding: 30rpx;
}

.loading-text {
  font-size: 28rpx;
  color: #999;
}
</style>
